<template>
	<div id="app">
		<div>
			<span>全选:</span>
			<!-- 复选框使用v-model单独绑定一个响应式布尔值
			     布尔值的true/false会影响选框的勾选，true：勾选，false：取消
				 同时，页面上选框的变化也会改变布尔值的true/false-->
			<input type="checkbox" v-model="isAllChecked"/>
			<button>反选</button>
			<ul>
				<li v-for="(item, index) in arr" :key="index">
					<input type="checkbox" v-model="item.checked"/>
					<span>{{ item.name }}</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script setup>
	import {
		reactive, ref, computed
	} from 'vue'
	const arr = reactive([
		{
			name: "猪八戒",
			checked: false,  // 为了给当前行的复选框使用的
		},
		{
			name: "孙悟空",
			checked: false,
		},
		{
			name: "唐僧",
			checked: false,
		},
		{
			name: "白龙马",
			checked: false,
		},
	])
	// const flag = ref(false)  // 响应式，计算属性的结果
	const isAllChecked = computed(() => {
		// 根据find，找数组中是否有一个对象的checked是false
		let obj = arr.find(item => item.checked === false) // 返回第一个符合条件的对象
		if(obj) {
			return false
		} else {
			return true
		}
	})
</script>

<style scoped>

</style>